<template>
  <div class="common-container">
    <div class="content-wrap">
      <main-title />
      <div class="content">
        <div class="common-search">
          <el-form class="common-form" :inline="true" :model="state.queryForm" size="small">
            <el-form-item label="项目类别">
              <el-select v-model="state.queryForm.type" placeholder="请选择" @change="search">
                <el-option
                  v-for="item in state.typeOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="项目名称">
              <el-input v-model="state.queryForm.name" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btn-search" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
          <el-button class="btn-add" type="primary" size="small" @click="addInit">新项目</el-button>
        </div>
        <div class="list">
          <div class="list-title">
            <span>全部</span>
            <span class="total">2</span>
          </div>
          <div class="item">
            <div class="item-top"></div>
            <div class="item-bottom"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

import { Drawer, MainTitle } from '&/mixins/useComponent'
import IBaseObj from '#/index'

const state: IBaseObj = reactive({
  queryForm: {
    type: '',
    name: '',
  },
  typeOptions: [],
})

const search = () => {}

const addInit = () => {}
</script>

<style lang="scss" scoped>
[data-theme='light'] {
  :root {
    --color1: #1e3352;
    --color2: #6e6e6e;
  }
}

.list {
  width: 960px;
  margin: 0 auto;

  &-title {
    font-size: 20px;
    color: var(--color1);
  }

  .total {
    margin-left: 18px;
    color: var(--color2);
  }
}
</style>
